<template>
  <footer class="footer">
    <!-- 底部导航 开始 -->
    <mt-tabbar v-model="selected" fixed class="bottom_card">
      <mt-tab-item id="index">
        推荐
        <img
          slot="icon"
          v-if="selected == 'index'"
          src="../assets/main_1.png"
        />
        <img v-else slot="icon" src="../assets/main_0.png" alt="" />
      </mt-tab-item>
      <mt-tab-item id="circle">
        泳圈
        <img
          slot="icon"
          v-if="selected == 'circle'"
          src="../assets/cart_1.png"
        />
        <img v-else slot="icon" src="../assets/cart_0.png" alt="" />
      </mt-tab-item>
      <mt-tab-item id="find">
        发现
        <img slot="icon" v-if="selected == 'find'" src="../assets/find_1.png" />
        <img v-else slot="icon" src="../assets/find_0.png" alt="" />
      </mt-tab-item>
      <mt-tab-item id="me">
        我的
        <img slot="icon" v-if="selected == 'me'" src="../assets/me_1.png" />
        <img v-else slot="icon" src="../assets/me_0.png" alt="" />
      </mt-tab-item>
    </mt-tabbar>
    <!-- 底部导航 结束 -->
  </footer>
</template>

<script>
export default{
  data() {
    return {
      selected: "index",
    }
  },
  watch:{
    /** 当改变底部选项卡selected的值后触发 */
    selected(newval) {
      if (newval == "circle") {
        this.$router.push("/circle");
      } else if (newval == "index") {
        this.$router.push("/index");
      } else if (newval == "find") {
        this.$router.push("/find");
      } else if (newval == "me") {
        this.$router.push("/me");
      }
    },
  }
}
</script>


<style>
/* 底部导航 */
.footer .bottom_card {
  background-clip: #efefef;
}
</style>